<template>
    <div class="panle carlist">
       <!-- 无方框型热卖排列 -->
        <CrossLine></CrossLine>
        <div class="h4" @tap="more()">
            热门车型报价<span style="font-weight:600;position:relative;left:5px;top:0px;" class="icon-1"></span>
        </div>
        <div>
            <ul class="cfix">
                <li v-for="car in carsList">
                    <a href="#">
                        <div class="box">
                            <div class="pic">
                              <img v-lazy="car.img">
                            </div>
                            <div style="position:relative;bottom:0px;width:100%;background:#f1ece2;color:#917b4e;text-align:left;padding-left:5px;height:25px;line-height:25px;"><b>{{car.offer}}</b>条报价</div>
                            <span class="top top-ico top1"></span>
                            <div class="bottom cfix">
                              <p class="num" style="padding-left:5px;">
                                  {{car.name}}
                              </p>
                              <p class="price" style="padding-left:5px;">
                                  <b>{{car.price}}</b>万起
                              </p>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import CrossLine from '@/components/base/cross-line/cross-line'
  export default {
    data() {
      return {
        carsList: [
          {
            name: '卡罗拉2018春季新款',
            price:'9.32',
            offer:66,
            img: 'http://img.cnupai.com/upload/series/3d21cc1e813443f89e3a4bcf84da3009.png'
          },
          {
            name: '卡罗拉2018春季新款',
            price:'9.32',
            offer:66,
            img: 'http://img.cnupai.com/upload/series/3d21cc1e813443f89e3a4bcf84da3009.png'
          },
          {
            name: '卡罗拉2018春季新款',
            price:'9.32',
            offer:66,
            img: 'http://img.cnupai.com/upload/series/3d21cc1e813443f89e3a4bcf84da3009.png'
          },
          {
            name: '卡罗拉2018春季新款',
            price:'9.32',
            offer:66,
            img: 'http://img.cnupai.com/upload/series/3d21cc1e813443f89e3a4bcf84da3009.png'
          },
          {
            name: '卡罗拉2018春季新款',
            price:'9.32',
            offer:66,
            img: 'http://img.cnupai.com/upload/series/3d21cc1e813443f89e3a4bcf84da3009.png'
          },
          {
            name: '卡罗拉2018春季新款',
            price:'9.32',
            offer:66,
            img: 'http://img.cnupai.com/upload/series/3d21cc1e813443f89e3a4bcf84da3009.png'
          },
        
          
        ],
      }
    },
    created() {},
    mounted() {},
    //注意销毁掉监听，不然报错
    destroyed () {},
    components: {
      CrossLine
    },
    methods: {
      more(){
        this.$router.push({
            path: '/filter/'
        })
      }
    }
  }

</script>

<style scoped>
  /* 首页车型列表 */
  .carlist {
    padding-bottom: 0rem;
  }

  .panle {
    position: relative;
  }

  .panle:before {
    content: "";
    background-color: #e5e5e5;
    height: 1px;
    position: absolute;
    left: 0;
    right: 0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    top: 0;
  }

  .panle .h4 {
    font-size:15px;
    padding: .6rem .5rem 0rem 0.5rem;
    background-color: #fff;
    margin-bottom:0px!important;
    text-align:center;
    color:#333333;
  }
  .panle .h4 a.more {
    float: right;
    position: relative;
    padding-right: .5rem;
  }

  .cfix:after {
    content: ".";
    clear: both;
    height: 0;
    visibility: hidden;
    display: block;
  }
   .carlist {
     background-color:#fff;color:#333333
   }
  .carlist ul {
    overflow:hidden;
  }
  .carlist li {
    width: 50%;
    float: left;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

  .carlist a {
    -webkit-tap-highlight-color: rgba(245,245,245,.3);
  }

  .carlist a div.box {
    margin: 0 auto;
    position: relative;
    background-color:#fff;
    text-align: center;
    margin:10px 8px 8px 8px;
  }
  .carlist a div.box .pic {
    overflow: hidden;margin:0;padding:0;background-color:#fff;padding-top:30px;

  }

  .carlist a div.box .pic img {
    width:90%;
    height:90%;
  }
  

  .carlist a div.box .bottom {
    line-height:1.1rem;
    width: 100%;
    text-align: left;
    font-size: .6rem;
    color:#333333
  }
    .carlist a div.box .bottom p{
      margin:0px;font-size:0.65rem;color:#333333
    }
    .carlist a div.box .bottom p b{
      color:#ff6a27;
    }
    .carlist a div.box .bottom .num{
      font-size:15px;
    }
    .carlist a div.box .top {
      position: absolute;
      top: .16rem;
      left: .16rem;
      text-align: center;
    }

  .carlist a .top.top-ico {
    width: 2.1rem;
    height: 1.4rem;
    background: url(https://cxstatic.img16888.com/dist/images/mobile/index-bg-v1.png) no-repeat;
    background-size: 3.55rem 6.1rem;
  } 
  

  

  .carlist a div.text {
    text-align: center;
    padding: .25rem 0 0;
    font-size: .7rem;
    position: absolute;
    top:9px;
    right: .25rem;
  }
</style>
